@import './vwsearch';

header{
    background-color: #211d1c;
    height: vw(100);
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid #524e4d;
    img{
        width: vw(53);
        height: vw(53);
    }
    .search-border{
        width: vw(547);
        height: vw(60);
        border: 1px solid #fff;
        border-radius: vw(36);
        display: flex;
        align-items: center;
        padding-left: vw(15);
        color: #808080;
        margin-left: vw(10);
        i{
            font-size: 30px;
            color: #fff;
            margin-right: vw(10);
        }
        input{
            // width: 100%;
            font-size: vw(30);
            border: none;
            outline: none;
            background-color: #211d1c;
        }
    }
}

.user-introduce{
    width: vw(721);
    height: vw(410);
    background-color: #21201e;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    // align-content: space-around;
    .userinformation{
        margin: 0 auto;
        padding-top: vw(33);
        width: vw(222);
        height: vw(267);
        display: flex;
        justify-content: center;
        align-content: space-around;
        flex-wrap: wrap;
        p,span{
            color: #fff;
        }
        div{
            width: vw(222);
        }
        .user-head{
            // width: vw(222);
            height: vw(148);
            text-align: center;
            img{
                width: vw(138);
                height: vw(138);
            }
        }
        .person{
            height: vw(31);
            display: flex;
            justify-content: space-evenly;
            p{
                width: vw(86);
                height: vw(34);
            }
            // span{

            // }
        }
        .star{
            height: vw(32);
            width: vw(143);
            color: yellow;
            display: flex;
            justify-content: space-around;
        }
        .bottom{
            height: vw(34);
            width: vw(300);
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left{
                padding: 0 5px;
                display: flex;
                justify-content: flex-start;
                border-right: 1px solid #a4a39f;
                width: 28vw;
                p{
                    margin-left: 3px;
                }
            }
            .right{
                width: vw(265);
                display: flex;
                justify-content: flex-start;
                margin-left: 1vw;
                p{
                    margin-left: 3px;
                }
            }
            .red{
                color: red;
                font-weight: 600;
            }
        }
    }
    .button{
        display: flex;
        justify-content:space-evenly;
        width: vw(650);
        height: vw(63);
        
    }
    button{
        width: vw(248);
        height: vw(63);
        border-radius: vw(36);
        font-size: vw(29);
        color: #fff;
        background-color: #cdcdcd;
    }
    .redbt{
        background-color: red;
    }
}

.graybg{
    height: vw(28);
    background-color: #303030;
}

.resource{
    height: vw(800);
    padding: vw(38) 0 0 vw(41);
    box-sizing: border-box;
    background-color: #222222;
    overflow-y: scroll;
    div:nth-child(1){
        height: vw(80);
        width: vw(640);
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #343434;
        text-align: center;
        line-height: vw(80);
        span{
            font-size: vw(27);
            color: #707070;
        }
        i{
            font-size: vw(30);
            color: #7b7b7b;
        }
    }
    div:nth-child(2),div:nth-child(3){
        height: vw(99);
        width: vw(496);
        margin: 0 auto;
        line-height: vw(99);
        text-align: center;
        p{
            color: #fff;
            font-size: vw(32);
        }
        border-bottom: 1px solid #353535;
    }
    div:nth-child(3){
        border: none;
    }
    div:nth-child(4),div:nth-child(5),div:nth-child(6){
        height: vw(99);
        width: vw(640);
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #343434;
        text-align: center;
        line-height: vw(80);
        span{
            letter-spacing: 1px;
            font-size: vw(30);
            color: #707070;
        }
        i{
            font-size: vw(45);
            color: #7b7b7b;
        }
    }
}

    

    


